<template>
  <div>
    <div class="crumbs">
      <el-breadcrumb separator="/">
        <el-breadcrumb-item>
          <i class="el-icon-lx-cascades"></i> 基础表格
        </el-breadcrumb-item>
      </el-breadcrumb>
    </div>
    <div class="container">
      <div class="handle-box">
        <el-button
          type="primary"
          class="handle-del mr10"
          @click="delAllSelection"
          >查询</el-button
        >
      </div>
      <el-table
        :data="tableData"
        border
        class="table"
        ref="multipleTable"
        header-cell-class-name="table-header"
        @selection-change="handleSelectionChange"
      >
        <el-table-column
          prop="id"
          label="id"
          width="80"
          align="center"
        ></el-table-column>
        <el-table-column
          prop="commodity_code"
          label="商品编码"
        ></el-table-column>
        <el-table-column prop="waresName" label="商品名称"></el-table-column>
        <el-table-column prop="cut" label="切工"></el-table-column>
        <el-table-column prop="content" label="含金量"></el-table-column>
        <el-table-column prop="total_weight" label="总重"></el-table-column>
        <el-table-column
          prop="cost_unit_price"
          label="成本单价"
        ></el-table-column>
        <el-table-column
          prop="label_unit_price"
          label="标签单价"
        ></el-table-column>
        <el-table-column
          prop="sales_operating_cost"
          label="销售工费"
        ></el-table-column>
        <el-table-column
          prop="sales_charge"
          label="销售工费计价"
          width="110"
        ></el-table-column>
        <el-table-column
          prop="sales_surcharge"
          width="100"
          label="销售附加费"
        ></el-table-column>
        <el-table-column prop="priceType" label="价格类型"></el-table-column>
        <el-table-column prop="certificate" label="证书号"></el-table-column>
        <el-table-column prop="hand_inch" label="手寸"></el-table-column>
        <el-table-column prop="amount" label="数量"></el-table-column>
        <el-table-column prop="coolour" label="颜色"></el-table-column>
        <el-table-column prop="cost" label="成本"></el-table-column>
        <el-table-column prop="coefficient" label="系数"></el-table-column>
        <el-table-column prop="fluorescence" label="荧光"></el-table-column>
        <el-table-column prop="si" label="净度"></el-table-column>
        <el-table-column prop="mould_number" label="模具号"></el-table-column>
        <el-table-column
          prop="name"
          label="总部店名称"
          width="100"
        ></el-table-column>
        <el-table-column prop="style_number" label="款号"></el-table-column>
        <el-table-column prop="inbound_age" label="库龄"></el-table-column>
        <el-table-column prop="alias" label="别名"></el-table-column>
        <el-table-column prop="description" label="备注"></el-table-column>
        <el-table-column label="操作" width="180" align="center">
          <template slot-scope="scope">
            <el-button type="text" @click="handleEdit(scope.$index, scope.row)"
              >商品详情</el-button
            >
          </template>
        </el-table-column>
      </el-table>
      <div class="pagination">
        <el-pagination
          background
          layout="total, prev, pager, next"
          :current-page="query.pageIndex"
          :page-size="query.pageSize"
          :total="pageTotal"
          @current-change="handlePageChange"
        ></el-pagination>
      </div>
    </div>

    <!-- 编辑弹出框 -->
    <el-dialog title="商品详情" :visible.sync="editVisible" width="85%">
      <div><b>常用信息:</b></div>
      <el-divider class="div1"></el-divider>
      <el-form
        ref="changyongform"
        :model="changyongform"
        label-width="70px"
        :inline="true"
      >
        <el-form-item label="商品编码">
          <el-input v-model="changyongform.commodity_code"></el-input>
        </el-form-item>
        <el-form-item label="模具号">
          <el-input v-model="changyongform.mould_number"></el-input>
        </el-form-item>
        <el-form-item label="款号">
          <el-input v-model="changyongform.style_number"></el-input>
        </el-form-item>
        <el-form-item label="电商款号">
          <el-input v-model="changyongform.commerce_number"></el-input>
        </el-form-item>
        <el-form-item label="证书号">
          <el-input v-model="changyongform.certificate"></el-input>
        </el-form-item>
        <el-form-item label="品牌">
          <el-input v-model="changyongform.brand"></el-input>
        </el-form-item>
        <el-form-item label="别名">
          <el-input v-model="changyongform.alias"></el-input>
        </el-form-item>
        <el-form-item label="手寸">
          <el-input v-model="changyongform.hand_inch"></el-input>
        </el-form-item>
        <el-form-item label="来源">
          <el-input v-model="changyongform.gwh_resourse"></el-input>
        </el-form-item>
        <el-form-item label="含金量">
          <el-input v-model="changyongform.content"></el-input>
        </el-form-item>
        <el-form-item label="成色">
          <el-input v-model="changyongform.name"></el-input>
        </el-form-item>
        <el-form-item label="属性">
          <el-input v-model="changyongform.name"></el-input>
        </el-form-item>
        <el-form-item label="石料">
          <el-input v-model="changyongform.name"></el-input>
        </el-form-item>
        <el-form-item label="款式">
          <el-input v-model="changyongform.name"></el-input>
        </el-form-item>
        <el-form-item label="规格">
          <el-input v-model="changyongform.spec"></el-input>
        </el-form-item>
        <el-form-item label="供应商">
          <el-input v-model="changyongform.name"></el-input>
        </el-form-item>
        <el-form-item label="商品名称">
          <el-input v-model="changyongform.il_waresName"></el-input>
        </el-form-item>
      </el-form>
      <div><b>成本价格:</b></div>
      <el-divider class="div1"></el-divider>
      <el-form
        ref="chengbenform"
        :model="chengbenform"
        label-width="90px"
        :inline="true"
      >
        <el-form-item label="成本计价">
          <el-input v-model="chengbenform.cost_valuation"></el-input>
        </el-form-item>
        <el-form-item label="单位重">
          <el-input v-model="chengbenform.piece_weight"></el-input>
        </el-form-item>
        <el-form-item label="附加成本费">
          <el-input v-model="chengbenform.oncost"></el-input>
        </el-form-item>
        <el-form-item label="成本单价">
          <el-input v-model="chengbenform.cost_unit_price"></el-input>
        </el-form-item>
        <el-form-item label="真实料价">
          <el-input v-model="chengbenform.tmaterials_price"></el-input>
        </el-form-item>
        <el-form-item label="真实成本价">
          <el-input v-model="chengbenform.tcost_price"></el-input>
        </el-form-item>
        <el-form-item label="真实成本">
          <el-input v-model="chengbenform.tcost"></el-input>
        </el-form-item>
        <el-form-item label="数量">
          <el-input v-model="chengbenform.amount"></el-input>
        </el-form-item>
        <el-form-item label="重量">
          <el-input v-model="chengbenform.weight"></el-input>
        </el-form-item>
        <el-form-item label="成本">
          <el-input v-model="chengbenform.cost"></el-input>
        </el-form-item>
        <el-form-item label="工费">
          <el-input v-model="chengbenform.laborcost"></el-input>
        </el-form-item>
        <el-form-item label="料价">
          <el-input v-model="chengbenform.price"></el-input>
        </el-form-item>
      </el-form>
      <div><b>销售价格:</b></div>
      <el-divider class="div1"></el-divider>
      <el-form
        ref="xiaoshouform"
        :model="xiaoshouform"
        label-width="90px"
        :inline="true"
      >
        <el-form-item label="系数">
          <el-input v-model="xiaoshouform.coefficient"></el-input>
        </el-form-item>
        <el-form-item label="附加销售费">
          <el-input v-model="xiaoshouform.sales_surcharge"></el-input>
        </el-form-item>
        <el-form-item label="标签价">
          <el-input v-model="xiaoshouform.label_price"></el-input>
        </el-form-item>
        <el-form-item label="销售工费">
          <el-input v-model="xiaoshouform.sales_operating_cost"></el-input>
        </el-form-item>
        <el-form-item label="参考售价">
          <el-input v-model="xiaoshouform.reference_price"></el-input>
        </el-form-item>
        <el-form-item label="标签金额">
          <el-input v-model="xiaoshouform.money"></el-input>
        </el-form-item>
        <el-form-item label="价格类型">
          <el-input v-model="xiaoshouform.type"></el-input>
        </el-form-item>
      </el-form>
      <div><b>其他属性:</b></div>
      <el-divider class="div1"></el-divider>
      <el-form
        ref="qitaform"
        :model="qitaform"
        label-width="70px"
        :inline="true"
      >
        <el-form-item label="摘要">
          <el-input v-model="qitaform.abstract"></el-input>
        </el-form-item>
        <el-form-item label="分类">
          <el-input v-model="qitaform.name"></el-input>
        </el-form-item>
        <el-form-item label="系列">
          <el-input v-model="qitaform.name"></el-input>
        </el-form-item>
        <el-form-item label="提成分类">
          <el-input v-model="qitaform.name"></el-input>
        </el-form-item>
      </el-form>
    </el-dialog>

    <!--新增框弹出-->
    <el-dialog title="查询信息" :visible.sync="addVisible" width="60%%">
      <el-form ref="form" :model="form" label-width="70px" :inline="true">
        <el-form-item label="商品编码">
          <el-input v-model="form.commodity_code"></el-input>
        </el-form-item>
        <el-form-item label="商品名称">
          <el-input v-model="form.waresName"></el-input>
        </el-form-item>
        <el-form-item label="选择门店">
          <el-select v-model="value_mendian">
            <el-option
              v-for="item in options_mendian"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="选择来源">
          <el-select v-model="value_laiyuan">
            <el-option
              v-for="item in options_laiyuan"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="选择分类">
          <el-select v-model="value_fenlei">
            <el-option
              v-for="item in options_fenlei"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="addVisible = false">取 消</el-button>
        <el-button type="primary" @click="chaxun">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
export default {
  name: "pifa",
  data() {
    return {
      query: {
        address: "",
        name: "",
        pageIndex: 1,
        pageSize: 4
      },
      ab: null,
      addVisible: false,
      tableData: [],
      multipleSelection: [],
      delList: [],
      editVisible: false,
      pageTotal: 6,
      form: {},
      idx: -1,
      id: -1,
      xlsxFile: "",
      value_mendian: "",
      value_laiyuan: "",
      value_fenlei: "",
      options_mendian: [],
      options_laiyuan: [],
      options_fenlei: [],
      changyongform: {},
      chengbenform: {},
      xiaoshouform: {},
      qitaform: {}
    };
  },
  created() {
    this.getData();
    this.getData_fenlei();
    this.getData_mendian();
    this.getData_laiyuan();

    /*    this.getnewlist();*/
  },
  methods: {
    // 获取 easy-mock 的模拟数据
    getData() {
      this.$axios
        .get(this.$api.inventory.findall, {
          params: {
            pageNum: this.query.pageIndex,
            pageSize: this.query.pageSize
          }
        })
        .then(response => {
          var result = response.data.data.list;
          console.log(response);
          this.$set(this.$data, "tableData", result);
          this.pageTotal = response.data.data.total || 50;
          var totalPage2 = Math.ceil(this.pageTotal / this.query.pageSize);
          if (totalPage2 < this.query.pageIndex) {
            this.query.pageIndex = totalPage2;
            this.getData();
          }
        })
        .catch(err => {
          console.log(err);
          this.$alert("请求出错");
        });
    },
    getData_fenlei() {
      this.$axios
        .get(this.$api.inventory.fenlei, {
          headers: {
            "Content-Type": "application/json"
          }
        })
        .then(response => {
          console.log(response.data.data);
          for (var i = 0; i < response.data.data.length; i++) {
            var obj = {};
            obj.value = response.data.data[i].name;
            obj.label = response.data.data[i].name;
            this.options_fenlei.push(obj);
          }
        })
        .catch(err => {
          console.log(err);
          this.$alert("请求出错");
        });
    },
    getData_mendian() {
      this.$axios
        .get(this.$api.inventory.mendian, {
          headers: {
            "Content-Type": "application/json"
          }
        })
        .then(response => {
          console.log(response.data.data);
          for (var i = 0; i < response.data.data.length; i++) {
            var obj = {};
            obj.value = response.data.data[i].name;
            obj.label = response.data.data[i].name;
            this.options_mendian.push(obj);
          }
        })
        .catch(err => {
          console.log(err);
          this.$alert("请求出错");
        });
    },
    getData_laiyuan() {
      this.$axios
        .get(this.$api.inventory.laiyuan, {
          headers: {
            "Content-Type": "application/json"
          }
        })
        .then(response => {
          console.log(response.data.data);
          for (var i = 0; i < response.data.data.length; i++) {
            var obj = {};
            obj.value = response.data.data[i].resourse;
            obj.label = response.data.data[i].resourse;
            this.options_laiyuan.push(obj);
          }
        })
        .catch(err => {
          console.log(err);
          this.$alert("请求出错");
        });
    },
    // 触发搜索按钮
    handleSearch() {
      this.$set(this.query, "pageIndex", 1);
      this.getData();
    },
    // 删除操作
    handleDelete(index, row) {
      // 二次确认删除
      this.$confirm("确定要删除吗？", "提示", {
        type: "warning"
      })
        .then(() => {
          this.$axios
            .post(this.$api.inventory.delete, [row.id], {
              headers: {
                "Content-Type": "application/json"
              }
            })
            .then(response => {
              console.log(response);
              this.$message.success(response.data.msg);
              this.getData();
            })
            .catch(err => {
              console.log(err);
              this.$alert("请求出错");
            });
        })
        .catch(() => {});
    },
    // 多选操作
    handleSelectionChange(val) {
      this.multipleSelection = val;
    },
    delAllSelection() {
      this.addVisible = true;
    },
    // 编辑操作
    handleEdit(index, row) {
      this.editVisible = true;
      this.$nextTick(() => {
        this.$axios
          .get(this.$api.inventory.findbyid1 + row.id, {
            headers: {
              "Content-Type": "application/json"
            }
          })
          .then(response => {
            console.log("常用" + response.data.data);
            this.changyongform = response.data.data[0];
          })
          .catch(err => {
            console.log(err);
            this.$alert("请求出错");
          });

        this.$axios
          .get(this.$api.inventory.findbyid2 + row.id, {
            headers: {
              "Content-Type": "application/json"
            }
          })
          .then(response => {
            console.log("成本" + response.data.data);
            this.chengbenform = response.data.data[0];
          })
          .catch(err => {
            console.log(err);
            this.$alert("请求出错");
          });

        this.$axios
          .get(this.$api.inventory.findbyid3 + row.id, {
            headers: {
              "Content-Type": "application/json"
            }
          })
          .then(response => {
            console.log(response.data.data);
            this.qitaform = response.data.data[0];
          })
          .catch(err => {
            console.log(err);
            this.$alert("请求出错");
          });

        this.$axios
          .get(this.$api.inventory.findbyid4 + row.id, {
            headers: {
              "Content-Type": "application/json"
            }
          })
          .then(response => {
            this.xiaoshouform = response.data.data[0];
          })
          .catch(err => {
            console.log(err);
            this.$alert("请求出错");
          });
      });
    },
    getFile() {
      //获取file内容
      let files = this.$refs.fileId.files[0];
      this.xlsxFile = files;
    },
    // 保存编辑
    saveEdit() {
      this.editVisible = false;
      this.$axios
        .post(this.$api.inventory.update, JSON.stringify(this.form), {
          headers: {
            "Content-Type": "application/json"
          }
        })
        .then(res => {
          console.log(res.data.data);
          this.$message.success(`修改第 ${this.idx + 1} 行成功`);
          this.getData();
        });
      this.form = {};
    },
    // 分页导航
    handlePageChange(val) {
      console.log(val);
      console.log(arguments);
      this.$set(this.query, "pageIndex", val);
      this.getData();
    },
    chaxun() {
      this.addVisible = false;
      console.log({
        commodity_code: this.form.commodity_code,
        il_waresName: this.form.waresName,
        hq_name: this.value_mendian,
        gwh_resourse: this.value_laiyuan,
        cy_name: this.value_fenlei
      });
      this.$axios
        .post(
          this.$api.inventory.findByCondition,
          {
            commodity_code: this.form.commodity_code,
            il_waresName: this.form.waresName,
            name: this.value_mendian,
            gwh_resourse: this.value_laiyuan,
            cy_name: this.value_fenlei
          },
          {
            headers: {
              "Content-Type": "application/json"
            }
          }
        )
        .then(response => {
          var result = response.data.data;
          console.log(result);
          this.list1 = result;
          let res = {
            list: this.list1,
            pageTotal: 1
          };
          this.tableData = res.list;
          this.pageTotal = 1;
        })
        .catch(err => {
          console.log(err);
          this.$alert("请求出错");
        });
      this.form = {};
    }
  }
};
</script>

<style scoped>
.handle-box {
  margin-bottom: 20px;
}

.handle-select {
  width: 120px;
}

.handle-input {
  width: 300px;
  display: inline-block;
}
.table {
  width: 100%;
  font-size: 14px;
}
.red {
  color: #ff0000;
}
.mr10 {
  margin-right: 10px;
}
.table-td-thumb {
  display: block;
  margin: auto;
  width: 40px;
  height: 40px;
}
.div1 {
  margin-top: 5px;
}
</style>
